<template>
<!-- 返回消息错误提示 -->
<div class="only-shop-mask">
  <div class="test-dialog">
    <h3>提示</h3>
    <p>{{txt}}</p>
    <a href="javascript:;" class="start-test" @click="closeDialog()">确定</a>
    <div class="close-btn" @click="closeDialog()">
      <img src="../assets/images/dialog_close.png" alt="">
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'Info',
  data () {
    return {
    }
  },
  methods: {
    closeDialog(){
      this.$emit('infoClose');
    }
  },
  props: ['txt'],
  created: function(){
  }
}
</script>

<style lang="scss" scoped type="text/css">
@import  "../assets/scss/reset";
.only-shop-mask{
  position: fixed;
  background: rgba(0,15,25,.6);
  z-index: 200;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // display: none;
  .test-dialog{
    position: absolute;
    bottom: calculateRem(10px);
    left: calculateRem(10px);
    right: calculateRem(10px);

    border-radius: calculateRem(13px);
    height: calculateRem(224px);
    background: white;
    box-sizing: border-box;
    padding: calculateRem(10px);
    >h3{
      margin: 0;
      text-align: center;
      font-size: calculateRem(20px);
      color: #333;
      margin-top: calculateRem(18px);
    }
    >p{
      font-size: calculateRem(16px);
      color: #4b4b4b;
      text-align: center;
      @include break;
      line-height: calculateRem(24px);
      margin: 0;
      margin-top: calculateRem(14px);

    }
    .start-test{
      position: absolute;
      left: calculateRem(10px);
      right: calculateRem(10px);
      bottom: calculateRem(10px);

      display: block;
      
      height: calculateRem(50px);
      background: #E62622;
      border-radius: calculateRem(5px);
      color: white;
      font-size: calculateRem(20px);
      text-align: center;
      line-height: calculateRem(50px);
      
      &:active{
        background: #C51B0D;
      }
    }
    .close-btn{
      width: calculateRem(32px);
      height: calculateRem(32px);
      position: absolute;
      top: calculateRem(-47px);
      right: calculateRem(15px);
      border-radius: 50%;
      &:after{
        content: '';
        display: block;
        width: 2px;
        height: calculateRem(15px);
        background: rgba(255,255,255,.6);
        position: absolute;
        bottom: calculateRem(-15px);
        left: calculateRem(15px);
      }
      >img{
        width: 100%;
        height: 100%;
      }
    }
  }

}
</style>
